[#ftl]
[@define "agile._WidgetIcon" "_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin"]	
	template:"",warpper:"",description:"",iconHtml:"",iconClass:"",tooltip:"",title:"",widgetClass:"",name:""
	[#assign templateString][#noparse]
	<div class="dojoDndItem widgetIconItem">
		<div class="widgetIcon {iconClass}" data-dojo-attach-point="iconNode">{iconHtml}</div>		
		<input type="hidden" class='template' value="{template}"></input>			
		<input type="hidden" class='widgetClass' value="{widgetClass}"></input>
		<input type="hidden" class='warpper' value="{warpper}"></input>
	</div>
	[/#noparse][/#assign]
	,templateString:"${templateString?js_string}"
	//,widgetsInTemplate:true
//	,constructor: function(params,node){		
////		this.declaredClass = this.constructor.prototype.declaredClass;
////		if(arguments && arguments[1]){
////			lang.mixin(this,arguments[1]);
////		}
//		
//		this.templateString = lang.replace(this.templateString,params);		
//		console.log("###this.templateString",this.templateString,",params=",params);
//				
//	}
	,postMixInProperties:function(){
//		if(!this.iconHtml){
//			this.iconHtml = this.description;
//		}
//		//console.log("@@@this.declaredClass",this.declaredClass,this.widgetClass);
		//this.iconClass = this.declaredClass.replace(/\./g,"_");		
//		//console.log(this.declaredClass,"iconClass=",this.iconClass)
		var params = {template:this.template,widgetClass:this.widgetClass,warpper:this.warpper,iconHtml:this.iconHtml,iconClass:this.iconClass};
		this.templateString = lang.replace(this.templateString,params);		
		//console.log("###this.templateString",this.templateString,",params=",params);
		this.title = this.tooltip = this.description;	
//		//console.log("iconClass",this.iconClass);	
//		if("agile_form_DateTextBoxIcon agile_form_TimeTextBoxIcon".indexOf(this.iconClass) == -1){
//			var declaredClassName = this.iconClass.substring(this.iconClass.lastIndexOf("_") + 1);
//			var cssRule = "."+this.iconClass+"{background-image: url('${webAppHost}${context}/${project}/image/"+declaredClassName+".png')}";				
//			agile.addCssRule(cssRule);
//		}
//		agile.requireX(this.widgetClass);
//		//console.log("@@@",this.declaredClass,this.widgetClass);
//		agile["agile.widget-all"].push(this.declaredClass);
	}
	,postCreate:function(){
		this.domNode.title = this.description;
		
		this.watch("title",lang.hitch(this,function(name,old,value){
			this.domNode.title = value;
		}));
		
		//20141022
		this.own(
			on(this.iconNode,"click",lang.hitch(this,function(){
				if(domClass.contains(this.iconNode,"widgetIconHighlight")){
					domClass.add(this.iconNode,"widgetIcon");
					domClass.remove(this.iconNode,"widgetIconHighlight");	
					topic.publish("selected-icon",null);
					agile._selectedIcon = null;
				}
				else{
					domClass.remove(this.iconNode,"widgetIcon");
					domClass.add(this.iconNode,"widgetIconHighlight");	
					topic.publish("selected-icon",this.domNode);
					agile._selectedIcon = this.domNode;
				}
			}))
		);
		//coordinate selection among icons
		this.subscribe("selected-icon",function(iconItem){
			if(this.domNode == iconItem){
			}
			else if(domClass.contains(this.iconNode,"widgetIconHighlight")){
				domClass.remove(this.iconNode,"widgetIconHighlight");
				domClass.add(this.iconNode,"widgetIcon");
			}
		});
		//clear selection when context menu open
		this.subscribe("agile.contextmenuopen",function(event){
			if(domClass.contains(this.iconNode,"widgetIconHighlight")){
				domClass.remove(this.iconNode,"widgetIconHighlight");
				domClass.add(this.iconNode,"widgetIcon");
				agile._selectedIcon = null;
			}
		});
	}
[/@]